/**
* Created by wl
* 项目管理>持有中-详情页-投资服务-编辑投资动态信息
*/
<template>
    <div>
        <div>
            <div class="ca-title ca-m-t-20 ca-m-b-10">
                <div class="el-right" v-show="showBtn">
                    <el-button type="danger" @click="del" size="small">删除</el-button>
                    <el-button type="primary" @click="save" size="small">保存</el-button>
                    <el-button @click="close" size="small">取消</el-button>
                </div>
            </div>
            <el-form>
                <el-row>
                    <el-col :span="14">
                        <el-form-item label="标题" :label-width="formLabelWidth">
                            <el-input auto-complete="off" :maxlength="300" class="el-width" v-model="serviceInfo.itemHoldService.title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="服务时间" :label-width="formLabelWidth">
                            <el-date-picker type="date" placeholder="选择日期" v-model="serviceInfo.itemHoldService.serviceTime"
                                            format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务类型" :label-width="formLabelWidth">
                            <el-select v-model="serviceInfo.itemHoldService.serviceType" placeholder="请选择">
                                <el-option v-for="item in serviceType" :label="item.name" :value="item.id"
                                        :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="服务记录" :label-width="formLabelWidth">
                            <el-input auto-complete="off" :maxlength="3000" type="textarea" :rows="4" v-model="serviceInfo.itemHoldService.serviceRecord"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="文件记录" :label-width="formLabelWidth"></el-form-item>
                        <csUpload
                            :fileType="fileType"
                            :businessId="serviceInfo.itemHoldService.id"
                            :isShowFileChildType="false"
                            uploadType="all"
                            :getFileUploadedReturnData="getFileUploadedReturnDataFun"
                        ></csUpload>
                        <div class="ca-file-ul">
                            <el-row class="ca-file-row" v-for="(file, fileIndex) in serviceInfo.files" :key="fileIndex">
                                <el-col :span="1">
                                    <tz-icon-file-type class="ca-m-r-5" :fileType="file.fileName"></tz-icon-file-type>
                                </el-col>
                                <el-col :span="15">
                                    <div class="ca-text-over-flow-ellipsis ca-pointer"
                                         @click="previewFileCheck(file.id, file.fileName)">
                                        <span class="ca-font-size-16 ca-pointer">{{file.fileName}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="3" class="ca-pull-right ca-align-right">
                                    <a class="ca-download ca-m-r-10" @click="downloadFile(file.id)"></a>
                                    <el-button class="ca-table-btn" @click="deleteFile(file.id, fileIndex)">
                                        <i class="fa fa-times"></i>
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import mined from '__components/file-list/mixin';
    export default {
        mixins: [mined],
        data() {
            return {
                formLabelWidth: '90px',
                fileType: '10052',
                serviceType: this.$store.state.user.dictionaryMap.itemServiceType,
            }
        },
        watch: {
        },
        props: {
            showBtn: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
            serviceInfo: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            index: {
                type: Number,
                default: function () {
                    return 0;
                }
            }
        },
        mounted() {
        },
        methods: {
            close() {
                this.$emit('close', this.index)
            },
            del() {
                let that = this
                this.$confirm('确定要删除此信息吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    showClose: false,
                }).then(function () {
                    //删除操作
                    apiHttp(api.DEL_SERVICE, {itemId: that.$route.params.itemId, serviceId: that.serviceInfo.itemHoldService.id}).then(ret => {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            that.$message({
                                message: '数据删除成功！',
                                type: 'success',
                                center: true
                            });
                            that.$emit('addSave')
                        }
                    })
                })
            },
            update() {
                this.$emit('update')
            },
            getFileUploadedReturnDataFun(data) {
                data.map(val => {
                    this.serviceInfo.files.push(val)
                })
            },
            // 删除文件
            deleteFile(id, fileIndex) {
                this.$confirm('确认删除此文件?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    showClose: false,
                }).then(async () => {
                    apiHttp(api.DELETE_FILES,{id: id}).then( ret=>{
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                                center: true
                            });
                            this.serviceInfo.files.splice(fileIndex, 1)
                        }
                    })
                })
            },
            save() {
                let fileListIds = []
                this.serviceInfo.files.map(item => {
                    fileListIds.push(item.id)
                })
                let query = {
                    fileIds: fileListIds,
                    itemHoldService: {
                        id: this.serviceInfo.itemHoldService.id,
                        itemId: this.serviceInfo.itemHoldService.itemId,
                        serviceRecord: this.serviceInfo.itemHoldService.serviceRecord,
                        serviceTime: this.serviceInfo.itemHoldService.serviceTime,
                        serviceType: this.serviceInfo.itemHoldService.serviceType,
                        title: this.serviceInfo.itemHoldService.title,
                    },
                    itemId: this.$route.params.itemId,
                }
                apiHttp(api.EDIT_SERVICE, query).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            message: '数据修改成功！',
                            type: 'success',
                            center: true
                        });
                        this.$emit('update')
                    }
                })
            },
        },
        components: {
            csUpload: require('__components/upload-btn/index'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-right {
    float: right;
}
.el-width {
    width: 60%;
}
.ca-table {
    margin-bottom: 15px;
}
</style>
